<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示用户对象信息</title>
</head>
<body>
<h2>展示User用户信息</h2>
用户编号：<span th:text="${user.id}"></span><br>
用户姓名：<span th:text="${user.name}"></span><br>
用户手机号：<span th:text="${user.phone}"></span><br>
用户地址：<span th:text="${user.address}"></span><br>


<h2>展示 User 用户信息（星号表达式,仅在 div 范围内有效）：</h2>
<div th:object="${user}">
    用户编号：<span th:text="*{id}"></span><br/>
    用户姓名：<span th:text="*{name}"></span><br/>
    用户手机号：<span th:text="*{phone}"></span><br/>
    用户地址：<span th:text="*{address}"></span><br/>
</div>

<h1>URL 路径表达式：@{...}</h1>
<h2>绝对路径（没有参数）</h2>
<a th:href="@{http://localhost:8080/thymeleaf/info}">查看：绝对路径</a>
<h2>绝对路径（路径中有参数）</h2>
<a th:href="@{'http://localhost:8080/thymeleaf/user/info?id=' +
${user.id}}">查看用户信息：绝对路径(带参数)</a>
<h2 style="color: red">实际开发推荐使用：相对路径（没有参数）</h2>
<a th:href="@{/thymeleaf/info}">查看：相对路径</a>
<h2 style="color: red">实际开发推荐使用：相对路径（路径中有参数）</h2>
<a th:href="@{'/thymeleaf/info?id=' + ${user.id}}">查看用户信息：相
    对路径（带参数）</a>
<a th:href="@{/thymeleaf/info(id=${user.id})}">推荐使用：优雅的带参数路径
    写法</a>

<h1>th:action 属性的使用</h1>
<h2>请求路径中需要动态获取变量数据时，必须添加 th 前缀</h2>
<form th:action="@{'/user/login?id='+${user.id}}"></form>
<h2>以下两种方式获取不到用户 id</h2>
<form action="'/user/login?id='+${user.id}"></form>
<form action="/user/login"+${user.id}></form>

<!--
思考：为什么后两个 中${user.id} 获取不到数据？ 获取不到数据？
们 因为我们 Thymeleaf 是以 html 为载体的，所以 html 不会认识${} 语法。
我们请求的流程是，发送请求给服务器，服务器接收请求后，处理请求，跳转到指定的静
态 态 html 页面，在服务器端，Thymeleaf 模板引擎会按照它的语法，对动态数据进行处理，
是 所以如果要是 th 开头，模板引擎能够识别，会在服务器端进行处理，获取数据；如果没有
以 以 th 开头，那么 Thymeleaf 模板引擎不会处理，直接返回给客户端了。

-->



<h1>th:method 属性的使用</h1>
<form th:action="@{/user/login}" th:method="post"></form>


<h1>th:href 使用</h1>
<a href="http://www.baidu.com">超链接百度</a><br/>
<a th:href="'http://www.baidu.com?id=' + ${user.id}">th:href 链接</a>


<h1>th:src 属性的使用</h1>
<!--以下方式无法引入 js-->
<script src="/static/js/jquery-1.7.2.min.js"></script>
<!--该方法是常用方法-->
<script type="text/javascript"
        th:src="@{/jquery-1.7.2.min.js}"></script>
<script>
    $(function () {
        alert("引入 js 文件");
    });
</script>

<!--
这种方式比传统方式的好处是，在 URL 表达式前加/，会自动加上上下文根，避免 404 找不
到资源的情况。
-->

<h1>th:attr 属性的使用</h1>
<span zhangsan="${user.name}"></span>
<!--通过 th:attr 对自定义的属性赋值-->
<span th:attr="zhangsan=${user.name}"></span>


<h1>th:onclick 的使用</h1>
<!--目前 thymeleaf 版本要求只能传递数字和布尔值-->
<a th:onclick="'show('+${user.id}+')'">点击：显示学生编号</a>
<script type="text/javascript">
    function show(id) {
        alert("用户编号为：" + id);
    }
</script>


<a th:onclick="'show('+${user.id}+')'"
   th:style="'font-size:40px;color:red;'">点击：显示学生编号</a>



<h1>th:if 用法:如果满足条件显示，否则相反</h1>
<div th:if="${sex eq 1}">
    男：<input type="radio" name="sex" th:value="1"/>
</div>
<div th:if="${sex eq 0}">
    女：<input type="radio" name="sex" th:value="0"/>
</div>
<h1>th:unless 用法：与 th:if 用法相反，即对条件判断条件取反</h1>
<div th:unless="${sex == 1}">
    男：<input type="radio" name="sex" th:value="1"/>
</div>
<div th:unless="${sex eq 0}">
    女：<input type="radio" name="sex" th:value="0"/>
</div>
<div th:if="${user1 eq null}">
    <h3 style="color: red">用户未登录</h3>
</div>
<div th:unless="${user2 == null}">
    用户姓名：<span th:text="${user2.name}"></span>
</div>
<h1>从 session 中获取值</h1>
<div th:if="${user3 != null}">
    <span th:text="${user3.name}"></span>
</div>



<h1>th:switch/th:case 用法</h1>
<div th:switch="${sex}">
    <span th:case="1">性别：男</span><br/>
    <span th:case="2">性别：女</span><br/>
    <span th:case="*">性别：保密</span>
</div>





</body>
</html>